import React from 'react';
import './css/download.less';

import Footer from './footer'

import {BasePic} from '../../utils/basic';

const download = [
    {
      icon:`${BasePic}icon-win7.png`,
      iconF:`${BasePic}icon-win7-white.png`,
      text:'Windows7 以上',
      dataId:'classInDownLoad_win7',
      href:'//www.eeo.cn/download/classin_win_install_2.0.1.115_s.exe'
    },
    {
      icon:`${BasePic}icon-xp.png`,
      iconF:`${BasePic}icon-xp-white.png`,
      text:'Windows XP',
      dataId:'classInDownLoad_winxp',
      href:'//www.eeo.cn/download/classin_winxp_install_2.0.1.115_s.exe'
    },
    {
      icon:`${BasePic}icon-apple.png`,
      iconF:`${BasePic}icon-apple-white.png`,
      text:'macOS',
      dataId:'classInDownLoad_macOS',
      href:'//www.eeo.cn/download/classin_mac_install_2.0.1.115_s.dmg'
    }
  ]
  // ,
  //   {
  //     icon:`${BasePic}icon-apple.png`,
  //     iconF:`${BasePic}icon-apple-white.png`,
  //     text:'iOS',
  //     dataId:''
  //   }
  class Download extends React.Component{
    state={
      telShow:false
    }
    getSrc(e){
      e.target.dataId = e.target.id
      console.log(e.target)
    }
    render(){
        return (
            <div className="download-content banner-margin">
            <div className="download-banner">
                <div className="banner-img col-xs-12">
                  <img src={BasePic +'download-banner.png'}  alt=""/>
                </div>
            </div>
            <div className="download-select">
              <div className="select-content">
              {
                  download.map((item,index)=>{
                    return(
                    <div className="col-md-6 col-xs-12 select-one" key={`icon${item.text}`} style={{float:(index===1||index===3)?'right':'left'}}>
                      <img src={item.icon} className="icon" alt=""/>
                      <img src={item.iconF} className="iconF" alt=""/>
                      <p>{item.text}</p>
                      <div className="btn-show">
                      {
                          item.text==='iOS'?<a data-id={item.dataId} style={{cursor:"pointer"}} onClick={()=>{this.setState({telShow:true})}}>下载</a>:<a data-id={item.dataId} href={item.href} style={{cursor:"pointer"}} onClick={(e)=>{this.getSrc(e)}}>下载</a>
                      }
                      </div>
                      {/* {item.text==="iOS"&&this.state.telShow?
                          <Modal>
                            <div className='modal-content-down'>
                                <button type="button" className="close " aria-label="Close" style={{marginRight:0}} onClick={()=>{
                                        this.setState({
                                            telShow:!this.state.telShow
                                        })
                                    }}><img src={require('../../images/XX.png')} alt="" style={{marginTop:"0px",width:"20px",height:"20px"}}/></button>
                                    <div className="title-code">—&nbsp;&nbsp;扫码下载APP&nbsp;&nbsp;—</div>
                                    <div className="content-center">
                                      <div className="select-code-ios">
                                        <img alt="" src={require('../../images/download/ios-download.png')}/>
                                      </div>
                                      <div className="ios-code" style={{margin:0}}>仅支持iOS 9.0及以上系统版本</div>
                                    </div>
                                </div>
                          </Modal>:''} */}
                      
                    </div>
                    )
                  })
                }
                 <div className="col-md-6 col-xs-12 select-four" style={{float:"right"}}>
                  即将上线，敬请期待...
                </div>
              </div>
            </div>
            <Footer/>
          </div>
        );
    }
}
export default Download;